<template>
  <div class="page">
    <Navbarelder title="我的项目" />
    <!--    <div class="search-header f-r j-e a-c">-->
    <!--      <div class="f-r a-c filter-box">-->
    <!--        <span style="margin-right: 3px">筛选</span>-->
    <!--        <van-image-->
    <!--          width="0.28rem"-->
    <!--          height="0.33rem"-->
    <!--          :src="filterIcon"-->
    <!--        />-->
    <!--      </div>-->
    <!--    </div>-->
    <div class="content">
      <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
        <van-empty v-if="!tableData.length" description="暂无数据" />
        <div class="list">
          <div
            v-for="(item,index) in tableData"
            :key="index"
            class="list-item"
            @click.stop="routerJump(item)"
          >
            <div class="header f-r j-b a-c">
              <div class="title">{{ item.projectName }}</div>
              <el-button type="primary" size="mini" @click.stop="routerJump2(item)" style="font-size: 15px;">授权二维码</el-button>
            </div>
            <div class="label">
              项目类型：{{ item.projectCategory }}
            </div>
            <div class="label">
              法人： {{ item.legalPerson }}
            </div>
            <!--            <el-steps-->
            <!--              active-color="#1EC05F"-->
            <!--              :active="item.stage"-->
            <!--              center-->
            <!--              finish-status="success"-->
            <!--            >-->
            <!--              <el-step title="项目立项阶段" />-->
            <!--              <el-step title="规划许可阶段" />-->
            <!--              <el-step title="施工许可阶段" />-->
            <!--              <el-step title="竣工验收阶段" />-->
            <!--            </el-steps>-->

            <van-steps direction="vertical" inactive-color="#999" :active="Number(item.stage - 1)">
              <van-step>项目立项阶段</van-step>
              <van-step>规划许可阶段</van-step>
              <van-step>施工许可阶段</van-step>
              <van-step>竣工验收阶段</van-step>
            </van-steps>
          </div>
        </div>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import refresh from '@/mixins/refresh'
import { http_project } from '@/api'

export default {
  name: 'Project',
  mixins: [refresh],
  data() {
    return {
      filterIcon: require('@/assets/home/filter.png'),
      tableData: [
      ]
    }
  },
  methods: {
    routerJump(item) {
      this.$router.push({
        path: '/project-detail-elder',
        query: {
          projectId: item.projectId,
          vconsole: true
        }
      })
    },
    routerJump2(item) {
      this.$router.push({
        path: '/project-code-elder',
        query: {
          projectId: item.projectId,
          projectName: item.projectName,
          vconsole: true
        }
      })
    },
    onRefresh() {
      http_project.page().then(res => {
        this.tableData = res.data.map(el => {
          return {
            ...el
          }
        })
        this.refreshLoading = false
      })
    }
  }
}
</script>

<style scoped lang="scss">
.page {
    .search-header {
        background-color: #fff;
        padding: 10px 0;
        padding-right: 0.32rem;
        .filter-box {
            flex-shrink: 0;
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
        }
    }
    .list-item {
        width: 100%;
        background: #FFFFFF;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
        .header {
            .title {
                // height: 17px;
                font-size: 22px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #333333;
                margin-right: 10px;
            }
            margin-bottom: 23px;
        }
        .label {
            font-size: 19px;
            line-height: 19px;
            height: 19px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #999999;
            margin-bottom: 20px;
        }

    }
}
::v-deep .el-step {
            .el-step__title {
                width: 60px;
                font-size: 14px;
                line-height: 18px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #999999;
                margin-top: 5px;
            }
        }
.van-step{
  font-size: 18px;
}
</style>
